<template>
  <a-layout class="logincontent">
    <div class="loginform">
      <div class="imgBx">
        <div>
          <img src="/src/assets/home2.png" alt="logo" title="logo" style="height: 300px;margin-left: 100px;" />
        </div>
        <div style="margin-left: 80px;margin-top:10px">
          <a-typography-title>能源区块链交易平台</a-typography-title>
        </div>
      </div>
      <div class="loginBx">
        <a-form :model="manager" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-typography-title style="text-align: center">管理员登录</a-typography-title>
          <a-form-item label="账号" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input v-model:value="manager.m_id" placeholder="请输入账号" />
          </a-form-item>
          <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input-password v-model:value="manager.m_password" placeholder="请输入密码" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
            <a-row type="flex" justify="space-between">
              <a-button type="primary" @click="login">登&nbsp;&nbsp; 录</a-button>
              <a-button type="primary" @click="goToPage()">用户界面</a-button>
              <a-button type="link" @click="goToRegister">没有账号？立即注册</a-button>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-layout>
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";

const router = useRouter();

//reactive 双向绑定响应框
const manager = reactive({
  m_id: "",
  m_password: "",
});
const goToPage = () => {
  window.location.href = 'http://47.104.251.136/'
}
const login = () => {
  post("/manager/mLogin", manager).then((res) => {
    tip.success("登陆成功！");
    const token = res.data; //获取返回的令牌
    // 将令牌存储在本地
    setLocalToken(token);

    // 跳转至Home路由
    router.push({ path: "/m_home/index" });
  });
};
const goToRegister = () => {
  router.push({ path: "/m_register" });
};
</script>
<style>
.logincontent {
  display: flex;
  flex-direction: row;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  /* 竖直水平 */
  justify-content: center;
  align-items: center;
}

.loginform {
  opacity: 0.95;
  background-color: #fff;
  min-width: 600px;
  height: 500px;
  width: 1000px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}

.imgBx {
  margin-top: 20px;
  flex-direction: column;
  float: left;
}

.loginBx {
  width: 400px;
  margin: 100px 50px;
  float: right;
}
</style>